<template>
  <view class="product-detail-container" v-if="inited">
    <view class="header">
      <image class="cover" :src="showProductCoverUrl" mode="aspectFill"></image>
      <view class="price-info">
        <image class="bg" src="http://down.qwdata.vip/app_icon/1688052580281" mode="widthFix"></image>
        <image class="vs-icon" v-if="product.couponType" src="http://down.qwdata.vip/app_icon/1688053800441"
               mode="widthFix"></image>
        <image class="coupon-icon" src="http://down.qwdata.vip/app_icon/1688052612999" mode="widthFix"></image>
        <view class="sale-price">
          <view class="title">直播福利</view>
          <view class="price">
            <view class="unit">￥</view>
            {{ price }}
          </view>
        </view>
        <view class="right-container">
          <view class="old-price" v-if="usedCoupon">
            <view class="title">日常价</view>
            <view class="price">
              <view class="line"></view>
              ￥{{ priceFormat(product.price) }}
            </view>
          </view>
          <view class="icons">
            <image class="icon1" src="http://down.qwdata.vip/app_icon/1688052591641"
                   mode="widthFix"></image>
            <image class="icon2" src="http://down.qwdata.vip/app_icon/1688052599941"
                   mode="widthFix"></image>
          </view>
        </view>
      </view>
      <view class="title-info">
        <text class="title">
          <text class="huodong">夏日活动</text>
          {{ showProductTitle }}
        </text>
        <view class="tag">{{ product.subTitle }}</view>
        <!--        <view style="margin-top: 20rpx;color: red">分享3个好友打7折</view>-->
        <view class="divider"></view>
      </view>
    </view>
    <view class="props-container">
      <view class="item">
        <view class="label valid">永久有效</view>
        <view class="value">有效期</view>
      </view>
      <view class="item-divider"></view>
      <view class="item">
        <view class="label">已完结</view>
        <view class="value">状态</view>
      </view>
      <view class="item-divider"></view>
      <view class="item">
        <view class="label">{{ jointCount }}节</view>
        <view class="value">课时数</view>
      </view>
      <view class="item-divider"></view>
      <view class="item">
        <view class="label">{{ saleCountFormat(product.saleCount || 100) }}人</view>
        <view class="value">在学</view>
      </view>
    </view>
    <view style="background-color: #fff;padding-bottom: 1px">
      <view class="teacher-container" v-if="showTeacherInfo" style="margin-top: 0">
        <view class="info">
          <image :src="showTeacherInfo.avatarUrl"
                 mode="aspectFill" class="avatar"></image>
          <view class="f1 flex v vc">
            <text class="title">{{ showTeacherInfo.nickname }}</text>
            <text class="desc">{{ showTeacherInfo.desc }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="block-container chapters-container">
      <view class="label-container">
        <view class="label f1">课程目录</view>
        <view class="sub-label">共{{ jointCount }}节</view>
      </view>
      <view class="chapter-container" v-for="(chapter, i) in chapters" :key="chapter.id">
        <view class="divider" v-if="i"></view>
        <view class="chapter-item" @click="open(i)">
          <view class="chapter-label">{{ chapter.titleStr }}</view>
          <view class="chapter-desc" v-if="chapter.desc">{{ chapter.desc }}</view>
          <view class="chapter-desc" v-else>小节共{{ chapter.joints.length }}个</view>
          <image src="@/static/arrow.png" :class="['arrow', openIndex === i?'open':'']"></image>
        </view>
        <view v-if="openIndex === i">
          <view class="joint-item" v-for="joint in chapter.joints" :key="joint.id">
            <view :class="['joint-type', 'joint-type-' + joint.type]"></view>
            <view class="joint-label">{{ joint.title }}</view>
            <image src="@/static/lock.png" class="lock"></image>
            <!--            <view class="joint-time">{{ joint.timeStr }}</view>-->
          </view>
        </view>
      </view>
    </view>
    <view class="block-container" v-if="teacher">
      <view class="teacher-container">
        <view class="info">
          <image :src="teacher.avatarUrl"
                 mode="aspectFill" class="avatar"></image>
          <view class="f1 flex v vc">
            <text class="title">{{ teacher.nickname }}</text>
            <text class="desc">{{ teacher.desc }}</text>
          </view>
        </view>
      </view>
    </view>
    <LoginView ref="LoginView" @close="close"></LoginView>
    <view class="block-container">
      <view class="label">课程介绍</view>
      <image :src="product.detailImgUrl" mode="widthFix" class="detail-pic"></image>
    </view>
    <view class="goumai-container">
      <view class="title">
        <view class="line"></view>
        <view class="text">购买须知</view>
        <view class="line"></view>
      </view>
      <view class="body">
        <view class="label-container">
          <view class="label">一、购买后如何观看课程？</view>
        </view>
        <view class="group-text">
          方法一：打开抖音APP搜索【{{ appName }}】进入小程序。点击底部“已购课程”按钮，即可找到您购买的课程，点击“开始学习”观看课程学习。
        </view>
        <view class="group-text">
          方法二：打开抖音APP点击“我”-“右上角更多”-“我的订单”进入我的订单，点击“全部”即可找到对应课程，点击“订单详情”即可观看学习。
        </view>
        <view class="label-container">
          <view class="label">二、购买课程后能否退款?</view>
        </view>
        <view class="group-text">
          在支付的7个自然日内且学习进度小于5%的订单，可以在订单详情里发起退款申请，审核通过后将退款并关闭课程学习，退款金额原路返回。支付超过7个自然日或学习进度超过5%则无法发起退款。
        </view>
        <view class="label-container">
          <view class="label">三、售后问题如何咨询?</view>
        </view>
        <view class="group-text">
          方法一：若您需要咨询涉及如何使用相关问题，可以点击底部菜单栏的“问题咨询”进行咨询。
        </view>
        <view class="group-text">
          方法二：若您需要咨询涉及课程内容相关，可以私信联系老师进行沟通解答。
        </view>
      </view>
    </view>
    <view class="holder">
      <view v-if="mine" style="color: #ccc;text-align: center">- {{ mine.id }} -</view>
    </view>
    <view class="float-container">
      <view class="coupon-timedown" v-if="showTimeDown">
        <view class="tips">优惠倒计时</view>
        <view class="time-block">{{ timeDownStr[0] }}</view>
        <view class="time-block">{{ timeDownStr[1] }}</view>
        <view class="m-l-10">:</view>
        <view class="time-block">{{ timeDownStr[2] }}</view>
        <view class="time-block">{{ timeDownStr[3] }}</view>
        <view class="m-l-10">:</view>
        <view class="time-block">{{ timeDownStr[4] }}</view>
        <view class="time-block">{{ timeDownStr[5] }}</view>
      </view>
      <view class="f1" style="margin-left: 30rpx" v-if="canBuy">
        <view style="display: flex;font-size: 14px;align-items: baseline;color: red;font-weight: bold;">实付：￥
          <view style="font-size: 22px;font-weight: bold">{{ price }}</view>
        </view>
        <view class="flex" style="font-size: 12px;color: #999">
          <view style="margin-right: 20rpx">原价:￥{{ priceFormat(product.price) }}</view>
          <view>限时优惠:￥{{ priceFormat(AllCouponPrice) }}</view>
        </view>
      </view>
      <!--#ifdef MP-TOUTIAO -->
      <DyPayButton ref="dyPayButton" v-if="canBuy" :goodsId="product.dyProductId" :bizLine="2" :mode="2"
                   :goodsType="1"
                   :userId="mine.id"
                   :productId="product.id"
                   :couponPrice="AllCouponPrice"
                   :jointCount="jointCount"
                   :teacherId="showTeacherInfo.id"
                   :marketingReady="true"
                   @paySuccess="onPaySuccess"
                   @payFail="onPayFail"
                   class="buy-btn"></DyPayButton>
      <view class="buy-btn f1" style="margin-left: 30rpx" v-else @click="toStudy">开始学习</view>
      <!--#endif -->
      <!--#ifndef MP-TOUTIAO -->
      <view class="buy-btn disable">无法购买</view>
      <!--#endif -->
    </view>
    <view class="coupon-container" v-if="showCoupon" @touchmove.stop.prevent>
      <view class="coupon">
        <view class="teacher">
          <image :src="showTeacherInfo.avatarUrl"
                 mode="aspectFill" class="avatar"></image>
          <text class="nickname">{{ showTeacherInfo.nickname }}</text>
        </view>
        <view class="title">{{ product.couponPrice / 100 }}元红包</view>
        <view class="tips">恭喜获得直播福利红包</view>
        <view class="btn" @click="toUseCoupon"></view>
      </view>
    </view>
  </view>
</template>

<script>
import LoginView from "../../components/LoginView/LoginView.vue";
import {mapGetters, mapActions} from 'vuex'
import fanzhishiApi from "../../fanzhishiApi";
import day from "@/vendor/day";
import Navbar from "../../components/navbar.vue";
// #ifdef MP-TOUTIAO
import DyPayButton from '../../ttcomponents/DyPayButton/index'
// #endif
import utils from "../../libs/utils";

export default {
  props: ['course_id', 'mounted_teacher_id'],
  components: {
    Navbar,
    LoginView,
    // #ifdef MP-TOUTIAO
    DyPayButton,
    // #endif
  },
  data() {
    return {
      inited: false,
      product: null,
      orderId: null,
      mountedTeacher: null,
      jointCount: null,
      openIndex: 0,
      time: 0,
      couponPrice: 0,
      teacher: null,
      showCoupon: false,
      showTimeDown: false,
      usedCoupon: false,
      canScroll: true,
      canBuy: true,
      chapters: []
    }
  },
  computed: {
    ...mapGetters(['mine', 'appName', 'settings', 'appType']),
    showTeacherInfo() {
      if (this.mountedTeacher) {
        return this.mountedTeacher
      }

      return this.teacher
    },
    AllCouponPrice() {
      if (!this.product) {
        return 0
      }
      let couponPrice = 0
      if (this.product.couponType === 1) {
        couponPrice = this.product.couponPrice
      }
      couponPrice += this.couponPrice
      return couponPrice
    },
    showProductCoverUrl() {
      if (this.mountedTeacher && this.mountedTeacher.productCoverUrl) {
        return this.mountedTeacher.productCoverUrl
      }

      if (this.product)
        return this.product.coverUrl512
    },
    showProductTitle() {
      if (this.mountedTeacher && this.mountedTeacher.productTitle) {
        return this.mountedTeacher.productTitle
      }
      if (this.product)
        return this.product.title
    },
    price() {
      if (!this.product) {
        return ''
      }

      return this.priceFormat(this.product.price - this.AllCouponPrice)
    },
    timeDownStr() {
      return day().hour(0).minute(0).second(this.time).format('HHmmss')
    }
  },
  created() {
    this.init(this.course_id)
    utils.updateUserInfo()
  },
  methods: {
    ...mapActions(['refreshUser']),
    shareAppMessage(shareOption) {
      console.log(shareOption);
      let path = '/pages/product_detail/product_detail?course_id=' + this.product.id

      if (this.mounted_teacher_id) {
        path += '&mounted_teacher_id=' + this.mounted_teacher_id
      }

      return {
        title: this.product.mountTitle,
        desc: this.showProductTitle,
        path,
        success: (res) => {
          console.log("分享成功");
          console.log(res);
        },
      };
    },
    show() {
      this.init(this.course_id)
    },
    priceFormat(price) {
      const fen = price % 100
      const jiao = price % 10
      let num;
      if (fen === 0) {
        num = 0
      } else {
        if (jiao === 0) {
          num = 1
        } else {
          num = 2
        }
      }
      return (price / 100).toFixed(num)
    },
    saleCountFormat(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num
    },
    async initMountedTeacher(id) {
      const res = await fanzhishiApi.mountedTeacher(id)
      this.mountedTeacher = res.data.data.teacher
    },

    async init(id) {
      const res = await fanzhishiApi.productInfo(id)
      this.product = res.data.data.product
      this.teacher = res.data.data.teacher
      this.canBuy = res.data.data.canBuy
      // this.canBuy = false
      this.orderId = res.data.data.orderId
      if (this.canBuy && this.product.couponType && !this.showTimeDown) {
        this.showCoupon = true
      } else {
        this.showCoupon = false
      }

      let jointCount = 0
      const chapters = []
      res.data.data.chapters.map(chapter => {
        jointCount += chapter.joints.length

        if (chapter.joints.length || chapter.desc) {
          chapters.push(chapter)
        }
      })
      this.jointCount = jointCount
      this.chapters = chapters

      if (this.mounted_teacher_id) {
        await this.initMountedTeacher(this.mounted_teacher_id)
      }
      this.inited = true
    },
    toUseCoupon() {
      const use = () => {
        this.usedCoupon = true
        this.showCoupon = false
        this.canScroll = true

        uni.showToast({
          title: '获取成功！',
          duration: 2000
        })

        this.time = this.product.couponExpiredTime
        this._h = setInterval(() => {
          if (this.time - 1 <= 0) {
            this.time = 0
            clearInterval(this._h)
            return
          }

          this.time--
        }, 1000)
        this.showTimeDown = true
      }
      try {
        tt.followAwemeUser({
          success: (e) => {
            console.log('succ', e)
          },
          fail: (e) => {
            console.log('fail', e)
          },
          complete: (e) => {
            console.log('followAwemeUser', e)
            use()
          }
        })
      } catch (e) {
        console.log('followAwemeUser', e)
        use()
      }
    },
    async onPaySuccess(e) {
      console.log('onPaySuccess', e.detail)
      uni.showToast({
        title: '购买成功！',
        icon: 'none',
        duration: 2000
      });

      if (this.appType === 3) {
        await this.refreshUser()
        uni.navigateBack({delta: 2});
      } else {
        uni.navigateBack();
        setTimeout(() => {
          uni.navigateTo({url: '/pages/order_detail/order_detail?id=' + e.detail.orderId})
        }, 500)
      }
    },
    onPayFail(e) {
      console.log('onPayFail', e.detail)
      uni.navigateBack({
        complete() {
          console.log('onPayFail complete')
          uni.navigateTo({url: '/pages/order_detail/order_detail?id=' + e.detail.orderId})
        }
      });
    },
    toStudy() {
      uni.navigateTo({
        url: '/pages/course_enter/course_enter?order_id=' + this.orderId
      });
    },
    open(i) {
      if (this.openIndex === i) {
        this.openIndex = -1
      } else {
        this.openIndex = i
      }
    }
  }
}
</script>

<style lang="scss">
.product-detail-container {
  position: relative;
  @keyframes coupon-show {
    0% {
      transform: translateY(200%);
    }
    100% {
      transform: translateY(0%);
    }
  }

  @keyframes coupon-btn {
    0% {
      zoom: 1;
    }

    50% {
      zoom: 1.1;
    }

    100% {
      zoom: 1;
    }
  }

  .vip-container {
    margin: 20rpx;
    color: #000;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    background-image: linear-gradient(to right, #fde6bb, #e5ca9c);
    box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.3);

    .title {
      color: #000;
      margin-left: 20rpx;
      margin-top: 15rpx;
    }

    .tag {
      color: #de000b;
      font-size: 12px;
      margin-top: 10rpx;
      margin-left: 20rpx;
      margin-bottom: 20rpx;
    }

    .vip-icon-container {
      background-image: linear-gradient(#515151, #222832);
      width: 140rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .vip-price {
        color: #e5ca9c;
        font-size: 18px;
        margin-top: 10rpx;
        display: flex;
        align-items: baseline;

        .unit {
          font-size: 12px;
        }
      }

      .vip-icon {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .look-btn {
      color: #222832;
      background-color: #e3c898;
      font-size: 26rpx;
      padding: 15rpx 40rpx;
      border-radius: 40rpx;
    }
  }

  .coupon-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0005;

    .coupon {
      position: relative;
      background-image: url("http://down.qwdata.vip/app_icon/1688054600413");
      width: 505rpx;
      height: 652rpx;
      background-size: contain;
      animation: coupon-show 300ms;

      .teacher {
        display: flex;
        flex-direction: column;
        align-items: center;

        .avatar {
          width: 92rpx;
          height: 92rpx;
          border-radius: 46rpx;
          margin-top: 44rpx;
        }

        .nickname {
          font-size: 13px;
          color: #FFD9B1;
          margin-bottom: 30rpx;
          margin-top: 24rpx;
        }
      }

      .title {
        color: #fff;
        font-size: 34px;
        font-weight: bold;
        text-align: center;
      }

      .tips {
        margin-top: 20rpx;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
      }

      .btn {
        animation: coupon-btn 300ms infinite;
        background-color: rgba(14, 87, 205, 0);
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: absolute;
        bottom: 60rpx;
        left: 60rpx;
        right: 60rpx;
        border-radius: 40rpx;
      }
    }
  }

  .teacher-container {
    width: 690rpx;
    margin: 30rpx;
    border-radius: 16rpx;
    position: relative;
    padding: 1px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #F3F7FF;

    .info {
      flex: 1;
      display: flex;

      .gua-btn1 {
        background-color: #3177fd;
        color: #fff;
        height: 56rpx;
        width: 178rpx;
        font-size: 13px;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 30rpx;
      }

      .avatar {
        width: 100rpx;
        height: 100rpx;
        background-color: #fff;
        border-radius: 86rpx;
        margin: 24rpx;
        border: 2px solid #fff;
      }

      .title {
        font-size: 15px;
        color: #243139;
        font-weight: bold;
        margin-bottom: 6rpx;
        margin-top: 24rpx;
      }

      .desc {
        font-size: 13px;
        line-height: 24px;
        color: #5B606B;
        margin-right: 30rpx;
        margin-bottom: 24rpx;
      }
    }
  }

  .float-container {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    display: flex;
    height: 120rpx;
    box-shadow: 0 1px 10px #00000040;

    .coupon-timedown {
      position: absolute;
      height: 66rpx;
      background-color: #FDE6C6;
      left: 0;
      right: 0;
      top: -66rpx;
      color: #FD2242;
      display: flex;
      align-items: center;

      .tips {
        margin-left: 60rpx;
        margin-right: 60rpx;
        font-weight: bold;
      }

      .time-block {
        width: 40rpx;
        height: 40rpx;
        margin-left: 10rpx;
        border-radius: 8rpx;
        background-color: #FD2242;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
      }
    }

    .buy-btn {
      margin-top: 10rpx;
      margin-bottom: 10rpx;
      margin-right: 30rpx;
      background-color: #FD2242;
      color: #fff;
      font-size: 18px;
      display: flex;
      font-weight: 500;
      justify-content: center;
      align-items: center;

      &.disable {
        background-color: #aaa;
      }
    }
  }

  .block-container {
    padding-top: 1px;
    padding-bottom: 1px;
    width: 750rpx;
    background-color: #fff;
    margin-top: 20rpx;

    .label {
      font-size: 18px;
      color: #000;
      font-weight: bold;
      margin: 30rpx;
    }
  }

  .goumai-container {
    background-color: #fff;
    margin-top: 20rpx;
    padding-top: 1px;
    padding-bottom: 1px;

    .title {
      color: #2B53E8;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;

      .line {
        background-color: #2B53E8;
        height: 6rpx;
        width: 40rpx;
      }

      .text {
        margin-left: 20rpx;
        margin-right: 20rpx;
      }
    }

    .body {
      border: 1px solid #ddd;
      border-radius: 30rpx;
      margin-bottom: 60rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
      margin-top: 30rpx;
      padding-bottom: 30rpx;

      .label-container {
        margin-top: 36rpx;
        margin-left: 30rpx;

        .label {
          font-size: 16px;
          color: #2851E8;
          font-weight: bold;
        }
      }

      .group-text {
        color: #a09fa2;
        line-height: 24px;
        margin-left: 88rpx;
        margin-right: 32rpx;
        margin-top: 10rpx;
      }
    }


  }

  .chapters-container {
    .label-container {
      display: flex;
      align-items: baseline;
      padding-right: 30rpx;

      .label {
        margin-bottom: 10rpx;
      }

      .sub-label {
        font-size: 14px;
        color: #AAA9B3;
      }
    }
  }

  .chapter-container {
    .divider {
      margin-left: 30rpx;
      margin-right: 30rpx;
      border-top: 1px solid #ededed;
    }

    .joint-item {
      position: relative;
      margin: 30rpx;
      height: 90rpx;
      background-color: #F7F7F9;
      display: flex;
      align-items: center;
      padding-left: 30rpx;

      &:first-child {
        margin-top: 0;
      }

      .joint-type {
        margin-right: 20rpx;
        width: 32rpx;
        height: 40rpx;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;

        &.joint-type-2 {
          background-image: url("http://down.qwdata.vip/app_icon/1689063528980")
        }

        &.joint-type-1 {
          background-image: url("http://down.qwdata.vip/app_icon/1689064172455")
        }
      }

      .joint-label {
        font-size: 14px;
        color: #090D14;
        flex: 1;
      }

      .joint-time {
        color: #999;
        margin-right: 20rpx;
      }

      .lock {
        width: 30rpx;
        height: 30rpx;
        margin-right: 20rpx;
      }
    }

    .chapter-item {
      padding: 0 30rpx;
      height: 157rpx;
      padding-top: 1px;
      position: relative;


      .arrow {
        width: 12rpx;
        height: 24rpx;
        position: absolute;
        right: 30rpx;
        top: 70rpx;

        &.open {
          transform: rotate(90deg);
        }
      }

      .lock {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 30rpx;
        top: 70rpx;
      }

      .chapter-label {
        margin-top: 30rpx;
        font-size: 15px;
        color: #21262D;
        font-weight: bold;
      }

      .chapter-desc {
        font-size: 13px;
        color: #AAA9B3;
        margin-top: 20rpx;

        .joion-type {
          display: inline-block;
          border: 1px solid #0D94FF;
          color: #0D94FF;
          font-size: 12px;
          padding: 1px 5px;
          border-radius: 2px;
        }
      }
    }
  }

  .holder {
    height: 300rpx;
    background-color: #eee;
  }

  .detail-pic {
    width: 750rpx;
  }

  .header {
    background-color: #fff;
    flex-direction: column;
    display: flex;

    .cover {
      width: 750rpx;
      height: 580rpx;
    }

    .price-info {
      width: 750rpx;
      height: 140rpx;
      position: relative;
      margin-top: -26rpx;

      .coupon-icon {
        width: 140rpx;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .vs-icon {
        width: 60rpx;
        position: absolute;
        left: 260rpx;
        bottom: 20rpx;
      }

      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 750rpx;
        height: 150rpx;
      }

      .sale-price {
        color: #EB2A4A;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 30rpx;
        top: 15rpx;

        .price {
          display: flex;
          font-size: 26px;
          align-items: baseline;
          top: 50rpx;
          font-weight: bold;

          .unit {
            font-size: 12px;
            font-weight: normal;
          }
        }
      }

      .right-container {
        position: absolute;
        left: 350rpx;
        top: 40rpx;
        display: flex;

        .title {
          font-size: 11px;
        }

        .old-price {
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;

          .line {
            height: 1px;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: -10rpx;
          }

          .price {
            display: flex;
            font-size: 14px;
            align-items: center;
            top: 50rpx;
            left: 12rpx;
            margin-top: 8rpx;
            font-weight: normal;

            .unit {
              font-size: 12px;
              font-weight: normal;
            }
          }
        }

        .icons {
          align-items: center;
          margin-left: 30rpx;
          display: flex;
          flex-direction: column;

          .icon1 {
            width: 100rpx;
          }

          .icon2 {
            margin-top: 8rpx;
            width: 140rpx;
          }
        }
      }
    }

    .title-info {
      margin: 20rpx 30rpx;
      margin-bottom: 0;

      .title {
        font-size: 19px;
        font-weight: bold;
        color: #000;

        .huodong {
          background-color: #FD2242;
          padding: 5rpx 10rpx;
          border-radius: 10rpx;
          font-size: 12px;
          margin-right: 10rpx;
          color: #fff;
        }
      }

      .tag {
        color: #E54F6E;
        margin-top: 22rpx;
      }

      .divider {
        height: 1px;
        background-color: #EDEDED;
        margin-top: 30rpx;
      }
    }
  }

  .props-container {
    height: 144rpx;
    display: flex;
    align-items: center;
    background-color: #fff;

    .item-divider {
      width: 1px;
      height: 64rpx;
      background-color: #EDEDED;
    }

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .label {
        color: #21262D;
        font-size: 13px;
        font-weight: bold;

        &.valid {
          color: #1B59D3;
        }
      }

      .value {
        margin-top: 12rpx;
        color: #A9A9AC;
        font-size: 13px;
      }
    }
  }
}
</style>
